<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试压数据采集</title>
    <link rel="stylesheet" href="library/layui/css/layui.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .container {
            background-color: #eee;
        }

        .box {
            background-color: #eee;
        }

        ul {
            list-style: none;
            border-bottom-style: solid;
            border-top-style: solid;
            border-width: 1px;
            border-color: #e2e2e2;
        }

        ul.imglist {
            margin: o auto;
            width: 100%;
            overflow: hidden;
        }

        ul.imglist li {
            float: left;
            width: 70px;
            height: 55px;
            background-color: #1e9fff;
            margin: 5px;
            padding: 2px;
            border-radius: 5px;
        }

        ul.imglist li a {
            color: black;
        }

        ul.imglist li img {
            display: block;
            width: 30px;
            height: 30px;
            margin: auto;
            padding-top: 2px;
        }

        ul.imglist li span {
            display: block;
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-top: 6px;
            color: white;
            font-size: 13px;
            cursor: pointer;
            /* background-color: #000; */
        }

        .info-panel {
            margin: 5px;
            border: solid;
            border-width: 1px;
            border-color: #e2e2e2;
        }

        .layui-input[disabled] {
            color: #fff;
            background-color: green;
        }
    </style>
</head>

<body class="container">
    <div class="layui-row">
        <div class="layui-col-md12 layui-col-lg12 layui-col-xl12">
            <div class="box">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-md12">
                        <ul class="imglist">
                            <li id="startCollect">
                                <span>
                                    <i class="layui-icon layui-icon-chart" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>开始采集</span>
                            </li>
                            <li id="deviceManage">
                                <span>
                                    <i class="layui-icon layui-icon-app" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>设备管理</span>
                            </li>
                            <li id="templateManage">
                                <span>
                                    <i class="layui-icon layui-icon-templeate-1"
                                        style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>模板管理</span>
                            </li>
                            <li id="projectManage">
                                <span>
                                    <i class="layui-icon layui-icon-template-1"
                                        style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>工程管理</span>
                            </li>
                            <li id="formPointManage">
                                <span>
                                    <i class="layui-icon layui-icon-layer" style="font-size: 25px; color: #fff;"></i>
                                </span>
                                <span>界面点位</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-row"></div>
        <div class="layui-col-md2 layui-col-lg2 layui-col-xl2">
            <div class="layui-form layui-form-pane info-panel">
                <div class="layui-card">
                    <div class="layui-card-header">主信息</div>
                    <div class="layui-card-body">
                        <div class="layui-inline">
                            <label class="layui-form-label">压力(Mpa)</label>
                            <div class="layui-input-block">
                                <input type="text" name="mainPressure" id="mainPressure" autocomplete="off"
                                    class="layui-input" value="0" placeholder="主压力" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">温度(℃)</label>
                            <div class="layui-input-block">
                                <input type="text" name="mainTemplature" id="mainTemplature" autocomplete="off"
                                    class="layui-input" value="0" placeholder="主温度" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">远端信息</div>
                    <div class="layui-card-body">
                        <div class="layui-inline">
                            <label class="layui-form-label">压力(Mpa)</label>
                            <div class="layui-input-block">
                                <input type="text" name="remotePressure" id="remotePressure" autocomplete="off"
                                    class="layui-input" value="0" placeholder="远端压力" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">温度(℃)</label>
                            <div class="layui-input-block">
                                <input type="text" name="remoteTemplature" id="remoteTemplature" autocomplete="off"
                                    class="layui-input" value="0" placeholder="远端温度" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">当前阶段</div>
                    <div class="layui-card-body">
                        <div class="layui-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="date" id="date1" autocomplete="off" value="试压一段"
                                    class="layui-input" placeholder="试压一段" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">压力</label>
                            <div class="layui-input-block">
                                <input type="text" name="date" id="date1" autocomplete="off" class="layui-input"
                                    value="压力" placeholder="压力" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="date" id="date1" autocomplete="off" class="layui-input"
                                    value="时间" placeholder="时间" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="date" id="date1" autocomplete="off" class="layui-input"
                                    value="试压中..." placeholder="结果" disabled>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-col-md10 layui-col-lg10 layui-col-xl0">
            <div id="templature" style="width: 100%;height:300px;"></div>
            <div id="pressure" style="width: 100%;height:300px;"></div>
        </div>
    </div>
    <script src="library/jquery/jquery-3.7.1.min.js"></script>
    <script src="library/layui/layui.js"></script>
    <script src="library/echart/echarts.min.js"></script>
    <script src="library/moment/moment.js"></script>
    <script>

        $("#startCollect").on("click", function () {
            startCollect();
            window.formium.postMessage("StartCollect");
        })

        $("#deviceManage").on("click", function () {
            WindowBindObject.showForm("DeviceManage");
        })
        $("#templateManage").on("click", function () {
            WindowBindObject.showForm("TemplateManage");
        })
        $("#projectManage").on("click", function () {
            WindowBindObject.showForm("ProjectManage");
        })
        $("#formPointManage").on("click", function () {
            WindowBindObject.showForm("FormPointManage");
        })

        function mainTemplature(data, alarm) {
            if (alarm == 1) {
                $("#mainTemplature").css('background-color', 'red')
            }
            else {
                $("#mainTemplature").css('background-color', 'green')
            }
            $("#mainTemplature").val(data);
            console.log(data);
        }

        function mainPressure(data, alarm) {
            if (alarm == 1) {
                $("#mainPressure").css('background-color', 'red')
            }
            else {
                $("#mainPressure").css('background-color', 'green')
            }
            $("#mainPressure").val(data);
        }

        function remotePressure(data, alarm) {
            if (alarm == 1) {
                $("#remotePressure").css('background-color', 'red')
            }
            else {
                $("#remotePressure").css('background-color', 'green')
            }
            $("#remotePressure").val(data);
        }

        function remoteTemplature(data, alarm) {
            if (alarm == 1) {
                $("#remoteTemplature").css('background-color', 'red')
            }
            else {
                $("#remoteTemplature").css('background-color', 'green')
            }
            $("#remoteTemplature").val(data);
        }

        function startCollect() {
            templatureChart.setOption({
                xAxis: {
                    min: moment().format("YYYY-MM-DD HH:mm:ss"),
                },
            });
            pressureChart.setOption({
                xAxis: {
                    min: moment().format("YYYY-MM-DD HH:mm:ss"),
                },
            });
            setInterval(function () {
                var time = moment().format("YYYY-MM-DD HH:mm:ss");
                var data = [time, $("#mainTemplature").val()]
                mainTemplatureData.push(data);
                var data2 = [time, $("#remoteTemplature").val()]
                remoteTemplatureData.push(data2);

                var data3 = [time, $("#mainPressure").val()]
                mainPressureData.push(data3);

                var data4 = [time, $("#remotePressure").val()]
                remotePressureData.push(data4);

                var dataZoom = [{
                }];


                templatureChart.setOption({
                    series: [
                        {
                            name: '主温度',
                            data: mainTemplatureData
                        },
                        {
                            name: '远端温度',
                            data: remoteTemplatureData
                        }
                    ],
                    dataZoom: dataZoom,
                });

                pressureChart.setOption({
                    series: [
                        {
                            name: '主压力',
                            data: mainPressureData
                        },
                        {
                            name: '远端压力',
                            data: remotePressureData
                        }
                    ],
                    dataZoom: dataZoom,
                });
            }, 1500);
        }

        function chartOption() {
            var option = {
                tooltip: {
                    trigger: "axis",
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            type: 'png',
                            name: '下载',
                            title: '保存为图片',
                        },
                    },
                },
                dataZoom: [{
                    type: 'slider',
                    realtime: true,
                    top: "265px"
                }],
                xAxis: {
                    type: 'time',
                    name: '时间',
                    min: startDate,
                    //max: endDate,
                    axisLabel: {
                        formatter: '{MM}-{dd} {HH}:{mm}:{ss}',
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        width: 60,
                        overflow: 'break'
                    }
                },
                yAxis: {},
            };
            return option;
        }

        var nowString = moment().format("YYYY-MM-DD HH");
        var now = moment(nowString + ":00:00");

        var startDate = now.format("YYYY-MM-DD HH:mm:ss");

        var endDate = now.add(20, 'm').format("YYYY-MM-DD HH:mm:ss");
        var mainTemplatureData = [];
        var mainPressureData = [];
        var remoteTemplatureData = [];
        var remotePressureData = [];
        // 指定图表的配置项和数据
        var option = chartOption();
        option.title = { text: "温度曲线" }
        option.legend = {
            data: ['主温度', '远端温度']
        }
        option.series = [
            {
                name: '主温度',
                type: 'line',
                smooth: true,
                color: "#ff5722"
            },
            {
                name: '远端温度',
                type: 'line',
                smooth: true,
                color: "#ffb800"
            }
        ]
        var templatureChart = echarts.init(document.getElementById('templature'));
        templatureChart.setOption(option);

        var option2 = chartOption();
        option2.title = { text: "压力曲线" }
        option2.legend = {
            data: ['主压力', '远端压力']
        }
        option2.series = [
            {
                name: '主压力',
                type: 'line',
                smooth: true
            },
            {
                name: '远端压力',
                type: 'line',
                smooth: true
            }
        ]
        var pressureChart = echarts.init(document.getElementById('pressure'));
        pressureChart.setOption(option2);
    </script>
</body>

</html>